<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/bg.jpg);
			}

			h1{
				color: antiquewhite;
				text-align: center;
			}

			#main-switch{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			#color-btn{
				display: flex;
				justify-content: center;
				position: relative;
				top: -150px;
			}

			#color-btn>img{
				margin-left: 16px;
				margin-right: 16px;
			}
		</style>
		<script src="jquery/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<h1>新开普智能灯控系统</h1>
		<div id="main-switch">
			<img src="img/l-close.png" id="main-light" />
			<img src="img/light_btm_bg.png" style="position: relative;top: -84px;"/>
			<img id="switch-btn" src="img/switch-close.png" onclick="openOrClose()" style="position: relative; top: -266px;"/>
		</div>
		<div id="color-btn">
			<img src="img/off-red.png" id="red-btn" onclick="changeRed()"/>
			<img src="img/off-blue.png" id="blue-btn" onclick="changeBlue()"/>
			<img src="img/off-purple.png" id="purple-btn" onclick="changePurple()"/>
			<img src="img/off-green.png" id="green-btn" onclick="changeGreen()"/>
			<img src="img/off-yellow.png" id="yellow-btn" onclick="changeYellow()"/>
		</div>
	</body>
	<script type="text/javascript">
		function sendCmdToBck(cmd){
			$.get("openOrClose",{"cmd":cmd},function (result){
				console.log(result);
			})
		}

		function changeColor(cmd){
			$.get("changeColor",{"cmd":cmd},function (result){
				console.log(cmd,result);
			})
		}
		var flag = false;
		function openOrClose(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-close.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-close.png");
				document.getElementById("red-btn").setAttribute("src","img/off-red.png");

				flag = false;
				sendCmdToBck("close");
			}else{
				document.getElementById("main-light").setAttribute("src","img/l-red.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-red.png");
				document.getElementById("red-btn").setAttribute("src","img/on-red.png");
				flag = true;
				sendCmdToBck("open");
			}
		}

		function changeRed(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-red.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-red.png");
				document.getElementById("red-btn").setAttribute("src","img/on-red.png");
				document.getElementById("blue-btn").setAttribute("src","img/off-blue.png");
				document.getElementById("purple-btn").setAttribute("src","img/off-purple.png");
				document.getElementById("green-btn").setAttribute("src","img/off-green.png");
				document.getElementById("yellow-btn").setAttribute("src","img/off-yellow.png");
				changeColor("red");
			}else{
				alert("请开灯");
			}
		}

		function changeBlue(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-blue.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-blue.png");
				document.getElementById("blue-btn").setAttribute("src","img/on-blue.png");
				document.getElementById("red-btn").setAttribute("src","img/off-red.png");
				document.getElementById("purple-btn").setAttribute("src","img/off-purple.png");
				document.getElementById("green-btn").setAttribute("src","img/off-green.png");
				document.getElementById("yellow-btn").setAttribute("src","img/off-yellow.png");
				changeColor("blue");
			}else{
				alert("请开灯");
			}
		}

		function changePurple(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-purple.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-purple.png");
				document.getElementById("purple-btn").setAttribute("src","img/on-purple.png");
				document.getElementById("red-btn").setAttribute("src","img/off-red.png");
				document.getElementById("blue-btn").setAttribute("src","img/off-blue.png");
				document.getElementById("green-btn").setAttribute("src","img/off-green.png");
				document.getElementById("yellow-btn").setAttribute("src","img/off-yellow.png");
				changeColor("purple");
			}else{
				alert("请开灯");
			}
		}

		function changeGreen(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-green.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-green.png");
				document.getElementById("green-btn").setAttribute("src","img/on-green.png");
				document.getElementById("red-btn").setAttribute("src","img/off-red.png");
				document.getElementById("purple-btn").setAttribute("src","img/off-purple.png");
				document.getElementById("yellow-btn").setAttribute("src","img/off-yellow.png");
				document.getElementById("blue-btn").setAttribute("src","img/off-blue.png");
				changeColor("green")
			}else{
				alert("请开灯");
			}
		}

		function changeYellow(){
			if(flag){
				document.getElementById("main-light").setAttribute("src","img/l-yellow.png");
				document.getElementById("switch-btn").setAttribute("src","img/switch-yellow.png");
				document.getElementById("yellow-btn").setAttribute("src","img/on-yellow.png");
				document.getElementById("red-btn").setAttribute("src","img/off-red.png");
				document.getElementById("purple-btn").setAttribute("src","img/off-purple.png");
				document.getElementById("green-btn").setAttribute("src","img/off-green.png");
				document.getElementById("blue-btn").setAttribute("src","img/off-blue.png");
				changeColor("yellow");
			}else{
				alert("请开灯");
			}
		}
	</script>
</html>
